import GMap from '@/pages/pasture/List/components/GMap/GMap';
import { codeToName } from '@/utils/provinceOptions';
import { Form, Input } from 'antd';
import React, { useMemo, useState } from 'react';
import { debounce, throttle, isEmpty } from 'lodash-es';
import AddressSelect from './components/AddressSelect/AddressSelect';
import './Add.less';

export default function PastureList() {
  const onChange = (value: any, values: any) => {
    console.log(value);
    getAreaData(values);
  };
  const [areaData, setAreaData] = useState('');
  const getAreaData = throttle((value: any) => {
    if (value?.provinceArr?.length > 0 && value?.address) {
      const result = codeToName(value.provinceArr).join('') + value.address;
      console.log(result);
      setAreaData(result);
    }
  }, 1000);
  return (
    <div className="test-wrapper">
      <div className="test-main">
        <Form name="pastureAddForm" onValuesChange={onChange}>
          <Form.Item label="牧场名称">
            <Input placeholder="请输入" />
          </Form.Item>
          <AddressSelect />
        </Form>
      </div>
      <GMap areaData={areaData} />
    </div>
  );
}
